<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">


<h:head>
    <title>Airline</title>
    <style type="text/css">
        body {
            margin: 0 auto;
            padding: 0;
            width: 570px;
            font: 75%/120% Arial, Helvetica, sans-serif;
        }
        a:focus {
            outline: none;
        }
        #panel {
            background: #fbff79;
            height: 135px;
            display: none;
        }
        .slide {
            margin: 0;
            padding: 0;
            border-top: solid 4px #fbff79;
            background: url(Resource/btn-slide.gif) no-repeat center top;
        }
        .btn-slide {
            text-align: center;
            width: 144px;
            height: 31px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            font: bold 120%/100% Arial, Helvetica, sans-serif;
            color: #fff;
            text-decoration: none;
        }
        .active {
            background-position: right 12px;
        }
        .mainBtn{
            position: relative;
            width: 100%;
            height: 45px;
            padding: 10px 10px 10px 10px;
            background: #3092bb;
            font: bold 120%/100% Arial, Helvetica, sans-serif;
            color: #ffffff;
        }

    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">
        $(document).ready(function(){

            $(".btn-slide").click(function(){
                $("#panel").slideToggle("slow");
                $(this).toggleClass("active"); return false;
            });


        });
    </script>
</h:head>

<div id="panel">
    <h:form>
        <h:commandButton value="pilots" action="pilots" styleClass="mainBtn"/><br/>
        <h:commandButton value="stewardess" action="stewardesses" class="mainBtn"/><br/>
        <h:commandButton value="navigators" action="navigators"  class="mainBtn"/><br/>
    </h:form>
</div>

<p class="slide">
    <a href="#" class="btn-slide">Airline Menu</a>
</p>

<h:body>

</h:body>
</html>